<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>《ESP32-Arduino》LVGL之输入设备详解及实例 | MGodmonkeyの世界</title><meta name="keywords" content="lvgl,ESP32,Arduino"><meta name="author" content="MGodmonkey"><meta name="copyright" content="MGodmonkey"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#18171d"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-title" content="《ESP32-Arduino》LVGL之输入设备详解及实例"><meta name="application-name" content="《ESP32-Arduino》LVGL之输入设备详解及实例"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#18171d"><meta property="og:type" content="article"><meta property="og:title" content="《ESP32-Arduino》LVGL之输入设备详解及实例"><meta property="og:url" content="https://www.mgodmonkey.cn/posts/a56fc1a5.html"><meta property="og:site_name" content="MGodmonkeyの世界"><meta property="og:description" content="《ESP32-Arduino》LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https://mybog.s3.bitiful.net/imgs/cover/cover_26.webp?_r_=47737799-af30-1d7a-a0d3-62c52046243b"><meta property="article:author" content="MGodmonkey"><meta property="article:tag"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://mybog.s3.bitiful.net/imgs/cover/cover_26.webp?_r_=47737799-af30-1d7a-a0d3-62c52046243b"><meta name="description" content="《ESP32-Arduino》LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)"><link rel="shortcut icon" href="https://mybog.s3.bitiful.net/imgs/favicon.ico"><link rel="canonical" href="https://www.mgodmonkey.cn/posts/a56fc1a5"><link rel="preconnect" href="//cdn.cbd.int"><meta name="google-site-verification" content="xxx"><meta name="baidu-site-verification" content="Sqt9yFIkjZdA89TY"><meta name="msvalidate.01" content="xxx"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.cbd.int/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={linkPageTop:{enable:!0,title:"与数百名博主无限进步",addFriendPlaceholder:"昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片）：\n描述：\n站点截图（可选）：\n"},peoplecanvas:void 0,postHeadAiDescription:{enable:!0,gptName:"MGod",mode:"tianli",switchBtn:!1,btnLink:"https://afdian.net/item/886a79d4db6711eda42a52540025c377",randomNum:3,basicWordCount:1e3,key:"72937022917dd1869dad",Referer:"https://www.mgodmonkey.cn/"},diytitle:{enable:!0,leaveTitle:"空巢啦🪹",backTitle:"有蛋了🪺"},LA51:{enable:!0,ck:"K52IQR51E1m8suUy",LingQueMonitorID:"K7A7hMgFTh8JNQPk"},greetingBox:{enable:!0,default:"晚上好👋",list:[{greeting:"晚安😴",startTime:0,endTime:5},{greeting:"早上好鸭👋, 祝你一天好心情！",startTime:6,endTime:9},{greeting:"上午好👋, 状态很好，鼓励一下～",startTime:10,endTime:10},{greeting:"11点多啦, 在坚持一下就吃饭啦～",startTime:11,endTime:11},{greeting:"午安👋, 宝贝",startTime:12,endTime:14},{greeting:"🌈充实的一天辛苦啦！",startTime:14,endTime:18},{greeting:"19点喽, 奖励一顿丰盛的大餐吧🍔。",startTime:19,endTime:19},{greeting:"晚上好👋, 在属于自己的时间好好放松😌~",startTime:20,endTime:24}]},twikooEnvId:"https://twikoo.mgodmonkey.cn/",commentBarrageConfig:{enable:!0,maxBarrage:1,barrageTime:4e3,accessToken:"",mailMd5:""},music_page_default:"nav_music",root:"/",preloader:{source:3},friends_vue_info:void 0,navMusic:!0,mainTone:void 0,authorStatus:{skills:["🤖️ 数码科技爱好者","🔍 分享与热心帮助","🏠 智能家居小能手","🔨 设计开发一条龙","🤝 专修交互与设计","🏃 脚踏实地行动派","🧱 团队小组发动机","💢 壮汉人狠话不多"]},algolia:{appId:"LV9W14O4EO",apiKey:"0fa7b66b1866f423485b93e1e98ceb34",indexName:"hexo",hits:{per_page:6},languages:{input_placeholder:"输入关键词后按下回车查找",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简",rightMenuMsgToTraditionalChinese:"转为繁体",rightMenuMsgToSimplifiedChinese:"转为简体"},noticeOutdate:{limitDay:365,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:330},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,simplehomepage:!1,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{copy:!0,copyrightEbable:!1,limitCount:50,languages:{author:"作者: MGodmonkey",link:"链接: ",source:"来源: MGodmonkeyの世界",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",copySuccess:"复制成功，复制和转载请标注本文地址"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#3b70fc",bgDark:"#1f1f1f",position:"top-center"},source:{justifiedGallery:{js:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js",css:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,shortcutKey:{enable:!0,delay:100,shiftDelay:200},autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={configTitle:"MGodmonkeyの世界",title:"《ESP32-Arduino》LVGL之输入设备详解及实例",postAI:"",pageFillDescription:"前期准备, 环境, 硬件, 知识储备, 流程讲解, 实例, 触摸屏, 实体按键, 多功能按键(或叫波轮按键), 编码器, 将输入设备与组件绑定, 最后原文链接本人写的啊不算抄袭之输入设备详解及实例触摸屏实体按键编码器多功能按键前言好久没写博客了一方面是平时着实没有时间另一方面是知识还是欠缺实在没啥技术拿得出手其实更主要的还是懒最近玩的比较多的就是了自己也是做了几个小项目后续考虑开源考虑到网上入门教程还是比较少特此出来写篇博客对于就不过多介绍了能点进来的应该都知道是什么吧本篇博客不讲中的相关组件而侧重于讲解对于中的输入设备什么是输入设备呢对于来说输入设备有触摸板或鼠标键盘编码器外部虚拟按钮而对于大多数项目来说用触摸屏实体按键编码器的比较多打死我也不说是其他的我都没用过那么如何将这些设备与中的组件相关联就是本篇博客的主要目的前期准备环境工程相关教程见传送门注本博客虽是基于写的但掌握原理在其他平台一样能使用硬件带触摸或不带触摸的显示屏物理按键编码器如多功能按键如知识储备对应的文档页面原版英文文档传送门百问网翻译版文档传送门流程讲解在摆代码之前先过一下流程因为所有的输入设备都是基于这一套流程走的代码都大同小异这里面是一个函数名其作用就是不断读取输入设备的状态当检测到输入设备的状态与之前的状态不同时就会更新状态并做出相应的响应响应事件见传送门实例所有的实例都是基于官方模板所写的模板详见传送门以下实例的使用方法就是将其建成一个文件并新建一个同名文件文件用于函数声明且和在其他文件中调用文件用于函数定义这些都是语言的基础知识实在不懂的自行百度吧这里的输入设备初识化只需要在你工程初识化的地方调用函数即可触摸屏触摸屏反馈及初识化函数用的是第三方库中的相关内容触摸屏状态更新函数触摸屏初识化函数以下两种方式的功能都是触摸屏的校准用的是第一种而官方用的是第二种我也不知道那种方式更好输入设备初识化函数初识化触摸屏注册输入设备实体按键实体按键可以使用第三方库作为按键的反馈支持长按阶段性反馈即长按的话隔一段时间就切换下一个组件但这样就不能响应中的长按响应事件了也可以直接使用中读取引脚电平或者其他单片机中读取引脚电平的方法这种方式支持中的长按响应事件但不能长按阶段性反馈看各位取舍吧我的建议就是一般导航键都有个按键左右及确定键左右键使用中间确定键使用左键引脚右键引脚确定键引脚按键扫描函数用于区分哪个按键按下了没按下返回按键状态更新函数按键初识化函数是否允许双击是否允许长按是否允许双击是否允许长按输入设备初识化函数初识化按键注册输入设备说一下这里的类型为什么要设置为编码器类型因为我试过很多遍都没成功我觉得是这里的可能指的是键盘鼠标的那种键盘所以就没成功当然也可能单纯是我菜多功能按键或叫波轮按键多功能按键并不属于编码器类型虽然它们之间有些形状类似但原理截然不同多功能按键本质上就是按键多功能按键一共有个引脚其中为公共脚一般接地或接当多功能按键中间键按下时脚和脚接通因此脚可以组成一个按键开关如图图中黑色部分表示接通如当波轮开关顺时针旋转时脚接通当波轮开关继续旋转到时脚接通因此都可以分别和脚组成一个开关当转动角度不同时引脚被相继置为低电平或高电平根据引脚决定知道了多功能按键的原理使用起来也非常简单只需要把多功能按键看做按键使用将或引脚分别接到单片机口上引脚接地就能组成上述实体按键一样的效果代码就不展示了稍微变通一下就行编码器编码器的类型有各式各样但原理都相同原理我也没怎么明白就不丢人了其都有及四个引脚有些有多个引脚引脚为左右旋的时候触发引脚为按下时触发因此可以将引脚接地及引脚接单片机口组成导航键这里的编码器反馈用到了第三方库没办法好就好在第三方库多完全不用懂原理就能用窃喜左键引脚右键引脚确定键引脚旋转编码器编码器扫描函数用于判断左右及按下状态没按下返回编码器状态更新函数按键初识化函数输入设备初识化函数初识化编码器注册输入设备将输入设备与组件绑定输入设备初识化成功后如何将其与中的组件进行绑定呢这是很多教程中没有说明的也是我踩了很多坑之后才知道的这里就需要知道一个的概念是中很重要的一部分其作用就是将许多中的组件划分为不同的组输入设备可以通过切换绑定的组从而控制不同组中的组件这里介绍几个中常用的函数更多函数见传送门作用创建一个实例如作用删除一个实例作用设置一个实例为默认组作用获取默认组作用填加组件只有在中添加的组件才能受到控制作用移除组件作用移除所有组件作用设置为编辑模式或者导航模式这里的编辑模式只对如下拉列表按键矩阵等有二级控件时有用一般来说这些在导航模式都需要先点击确定才能编辑而在编辑模式下无需确定即可编辑作用将输入设备与相绑定这里的输入设备指返回的值这个最重要了前面初识化添加组件都弄了要是最后没绑定一切都白搭这里给个例子吧可以在函数中就创建而在窗口中通过的方式添加组件更多的自己慢慢探索吧这里的是的返回值案例中均没有使用到这个值最后官方最近出了一个图形化工具根据简单的拖拽即可导出代码支持最新的版本不过目前支持的组件不多而且是付费应用有天试用期感兴趣的见传送门我还是建议自己敲代码尽管这样会踩很多坑但毕竟踩坑才能进步才能成长最后看反馈不定期更下一期",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2024-06-18 16:31:53",postMainColor:""}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:(e,t,a)=>{if(0===a)return;const o={value:t,expiry:Date.now()+864e5*a};localStorage.setItem(e,JSON.stringify(o))},get:e=>{const t=localStorage.getItem(e);if(!t)return;const a=JSON.parse(t);if(!(Date.now()>a.expiry))return a.value;localStorage.removeItem(e)}},e.getScript=(e,t={})=>new Promise(((a,o)=>{const c=document.createElement("script");c.src=e,c.async=!0,c.onerror=o,c.onload=c.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(c.onload=c.onreadystatechange=null,a())},Object.keys(t).forEach((e=>{c.setAttribute(e,t[e])})),document.head.appendChild(c)})),e.getCSS=(e,t=!1)=>new Promise(((a,o)=>{const c=document.createElement("link");c.rel="stylesheet",c.href=e,t&&(c.id=t),c.onerror=o,c.onload=c.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(c.onload=c.onreadystatechange=null,a())},document.head.appendChild(c)})),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#18171d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#f7f9fe")};const t=saveToLocal.get("theme"),a=window.matchMedia("(prefers-color-scheme: dark)").matches,o=window.matchMedia("(prefers-color-scheme: light)").matches,c=window.matchMedia("(prefers-color-scheme: no-preference)").matches,n=!a&&!o&&!c;if(void 0===t){if(o)activateLightMode();else if(a)activateDarkMode();else if(c||n){const e=(new Date).getHours();e<=6||e>=18?activateDarkMode():activateLightMode()}window.matchMedia("(prefers-color-scheme: dark)").addListener((e=>{void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode():activateLightMode())}))}else"light"===t?activateLightMode():activateDarkMode();const d=saveToLocal.get("aside-status");void 0!==d&&("hide"===d?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="/css/custom.css" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="MGodmonkeyの世界" type="application/atom+xml"></head><body data-type="anzhiyu"><div id="web_bg"></div><div id="an_music_bg"></div><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><img class="loading-img nolazyload" alt="加载头像" src="https://mybog.s3.bitiful.net/imgs/head.jpg"><div class="loading-image-dot"></div></div></div><script>const preloader={endLoading:()=>{document.getElementById("loading-box").classList.add("loaded")},initLoading:()=>{document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",(()=>{preloader.endLoading()})),setTimeout((function(){preloader.endLoading()}),1e4),document.addEventListener("pjax:send",(()=>{preloader.initLoading()})),document.addEventListener("pjax:complete",(()=>{preloader.endLoading()}))</script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.10/progress_bar/progress_bar.css"><script async src="https://cdn.cbd.int/pace-js@1.2.4/pace.min.js" data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"></script><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><div id="nav-group"><span id="blog_name"><div class="back-home-button"><i class="anzhiyufont anzhiyu-icon-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" href="https://www.mgodmonkey.cn/" title="博客"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">AI项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://chat.mgodmonkey.cn/" title="ChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="ChatGPT"><span class="back-menu-item-text">ChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://newchat.mgodmonkey.cn/" title="NewChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="NewChatGPT"><span class="back-menu-item-text">NewChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://autogpt.mgodmonkey.cn/" title="AutoGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/火龙果.svg" alt="AutoGPT"><span class="back-menu-item-text">AutoGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://academic.chatwithpaper.org/" title="AcademicGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/石榴.svg" alt="AcademicGPT"><span class="back-menu-item-text">AcademicGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://chatwithpaper.org/" title="Chatpaper"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/芒果.svg" alt="Chatpaper"><span class="back-menu-item-text">Chatpaper</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">其他</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://memos.mgodmonkey.cn/" title="Memos"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="Memos"><span class="back-menu-item-text">Memos</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY" title="必过通原"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="必过通原"><span class="back-menu-item-text">必过通原</span></a></div></div></div></div><a id="site-name" href="/" accesskey="h"><div class="title">MGodmonkeyの世界</div><i class="anzhiyufont anzhiyu-icon-house-chimney"></i></a></span><div class="mask-name-container"><div id="name-container"><a id="page-name" href="javascript:anzhiyu.scrollToDest(0, 500)">PAGE_NAME</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kele"></use></svg> <span>归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-zhaji"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-denglong"></use></svg> <span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://music.mgodmonkey.cn"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-erji"></use></svg> <span>音乐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kafei"></use></svg> <span>番剧</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/air-conditioner"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-chonglang"></use></svg> <span>空调</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>社交</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon--chat"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-zhaopian_1"></use></svg> <span>相册集</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/MyFavoriteBaby/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xingsu"></use></svg> <span>大陆养虾</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_shu"></use></svg> <span>加入友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>个人</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_qizhi"></use></svg> <span>说说</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/task_list/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xiaoya"></use></svg> <span>清单</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/equipment/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xigua"></use></svg> <span>装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_aixin"></use></svg> <span>关于</span></a></li></ul></div></div></div><div id="nav-right"><div class="nav-button only-home" id="travellings_button" title="随机前往一个开往项目网站"><a class="site-page" onclick="anzhiyu.totraveling()" title="随机前往一个开往项目网站" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external"><i class="anzhiyufont anzhiyu-icon-train"></i></a></div><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机前往一个文章" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-dice"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索🔍" accesskey="s"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i> <span>搜索</span></a></div><input id="center-console" type="checkbox"><label class="widget" for="center-console" title="中控台" onclick="anzhiyu.switchConsole()"><i class="left"></i><i class="widget center"></i><i class="widget right"></i></label><div id="console"><div class="console-card-group-reward"><ul class="reward-all console-card"><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" target="_blank"><img class="post-qr-code-img" alt="微信" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_wechat.png"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" target="_blank"><img class="post-qr-code-img" alt="支付宝" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_alipay.png"></a><div class="post-qr-code-desc">支付宝</div></li></ul></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments"><div class="card-content"><div class="author-content-item-tips">互动</div><span class="author-content-item-title">最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div></div><div class="console-card-group-right"><div class="console-card tags"><div class="card-content"><div class="author-content-item-tips">音乐</div><span class="author-content-item-title">灵魂的碰撞💥</span></div></div><div class="console-card history"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-box-archiv"></i><span>文章</span></div><div class="card-archives"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多"><i class="anzhiyufont anzhiyu-icon-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">六月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">五月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">四月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/03/"><span class="card-archive-list-date">三月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/02/"><span class="card-archive-list-date">二月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/09/"><span class="card-archive-list-date">九月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">八月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">七月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">7</span><span>篇</span></div></a></li></ul></div><hr></div></div></div><div class="button-group"><div class="console-btn-item"><a class="darkmode_switchbutton" title="显示模式切换" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-moon"></i></a></div><div class="console-btn-item" id="consoleHideAside" onclick="anzhiyu.hideAsideBtn()" title="边栏显示控制"><a class="asideSwitch"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></a></div><div class="console-btn-item on" id="consoleCommentBarrage" onclick="anzhiyu.switchCommentBarrage()" title="热评开关"><a class="commentBarrage"><i class="anzhiyufont anzhiyu-icon-message"></i></a></div><div class="console-btn-item" id="consoleMusic" onclick="anzhiyu.musicToggle()" title="音乐开关"><a class="music-switch"><i class="anzhiyufont anzhiyu-icon-music"></i></a></div><div class="console-btn-item" id="consoleKeyboard" onclick="anzhiyu.keyboardToggle()" title="快捷键开关"><a class="keyboard-switch"><i class="anzhiyufont anzhiyu-icon-keyboard"></i></a></div></div><div class="console-mask" onclick="anzhiyu.hideConsole()" href="javascript:void(0);"></div></div><div class="nav-button" id="nav-totop"><a class="totopbtn" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i><span id="percent" onclick="anzhiyu.scrollToDest(0,500)">0</span></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" title="切换"><i class="anzhiyufont anzhiyu-icon-bars"></i></a></div></div></div></nav><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original">原创</a><span class="post-meta-categories"><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-inbox post-meta-icon"></i><a class="post-meta-categories" href="/categories/lvgl/" itemprop="url">lvgl</a></span><span class="article-meta tags"><a class="article-meta__tags" href="/tags/lvgl/" tabindex="-1" itemprop="url"><span><i class="anzhiyufont anzhiyu-icon-hashtag"></i> lvgl</span></a><a class="article-meta__tags" href="/tags/ESP32/" tabindex="-1" itemprop="url"><span><i class="anzhiyufont anzhiyu-icon-hashtag"></i> ESP32</span></a><a class="article-meta__tags" href="/tags/Arduino/" tabindex="-1" itemprop="url"><span><i class="anzhiyufont anzhiyu-icon-hashtag"></i> Arduino</span></a></span></div></div><h1 class="post-title" itemprop="name headline">《ESP32-Arduino》LVGL之输入设备详解及实例</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="anzhiyufont anzhiyu-icon-calendar-days post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" itemprop="dateCreated datePublished" datetime="2023-06-11T07:15:21.000Z" title="发表于 2023-06-11 15:15:21">2023-06-11</time><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-history post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" itemprop="dateCreated datePublished" datetime="2024-06-18T08:31:53.379Z" title="更新于 2024-06-18 16:31:53">2024-06-18</time></span></div><div class="meta-secondline"><span class="post-meta-separator"></span><span class="post-meta-wordcount"><i class="anzhiyufont anzhiyu-icon-file-word post-meta-icon" title="文章字数"></i><span class="post-meta-label" title="文章字数">字数总计:</span><span class="word-count" title="文章字数">2757</span><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-clock post-meta-icon" title="阅读时长"></i><span class="post-meta-label" title="阅读时长">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator"></span><span class="post-meta-position" title="作者IP属地为广西"><i class="anzhiyufont anzhiyu-icon-location-dot"></i> 广西</span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18v44h-352Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section><div id="post-top-cover"><img class="nolazyload" id="post-top-bg" src="https://mybog.s3.bitiful.net/imgs/cover/cover_26.webp?_r_=47737799-af30-1d7a-a0d3-62c52046243b"></div></header><main id="blog-container"><div class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container" itemscope itemtype="https://www.mgodmonkey.cn/posts/a56fc1a5.html"><header><a class="post-meta-categories" href="/categories/lvgl/" itemprop="url">lvgl</a><a href="/tags/lvgl/" tabindex="-1" itemprop="url">lvgl</a><a href="/tags/ESP32/" tabindex="-1" itemprop="url">ESP32</a><a href="/tags/Arduino/" tabindex="-1" itemprop="url">Arduino</a><h1 id="CrawlerTitle" itemprop="name headline">《ESP32-Arduino》LVGL之输入设备详解及实例</h1><span itemprop="author" itemscope itemtype="http://schema.org/Person">MGodmonkey</span><time itemprop="dateCreated datePublished" datetime="2023-06-11T07:15:21.000Z" title="发表于 2023-06-11 15:15:21">2023-06-11</time><time itemprop="dateCreated datePublished" datetime="2024-06-18T08:31:53.379Z" title="更新于 2024-06-18 16:31:53">2024-06-18</time></header><div class="note info flat"><blockquote><p>原文链接（本人写的啊，不算抄袭😎）：<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_45516773/article/details/123182714">《ESP32-Arduino》LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)</a></p></blockquote></div><blockquote><p>前言: 好久没写博客了，一方面是平时着实没有时间，另一方面是知识还是欠缺，实在没啥技术拿得出手(其实更主要的还是懒!!!)最近玩的比较多的就是LVGL了，自己也是做了几个小项目(后续考虑开源)，考虑到网上LVGL入门教程还是比较少，特此出来写篇博客。</p></blockquote><p>对于LVGL就不过多介绍了，能点进来的应该都知道LVGL是什么吧，本篇博客不讲UI中的相关组件，而侧重于讲解对于LVGL中的输入设备，什么是输入设备呢?对于LVGL来说，输入设备有：</p><ul><li>LV_INDEV_TYPE_POINTER：触摸板或鼠标</li><li>LV_INDEV_TYPE_KEYPAD： 键盘</li><li>LV_INDEV_TYPE_ENCODER：编码器</li><li>LV_INDEV_TYPE_BUTTON：外部虚拟按钮</li></ul><p>而对于大多数项目来说，用触摸屏，实体按键，编码器的比较多(打死我也不说是其他的我都没用过)，那么如何将这些设备与LVGL中的组件相关联就是本篇博客的主要目的。</p><h1>前期准备</h1><h2 id="环境">环境</h2><ul><li>VScode+Platformio+LVGL工程（相关教程见【<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_45516773/article/details/119673328">传送门</a>】）</li></ul><blockquote><p>注：本博客虽是基于Arduino写的，但掌握原理，在其他平台一样能使用</p></blockquote><h2 id="硬件">硬件</h2><ul><li>ESP32</li><li>带触摸或不带触摸的TFT显示屏</li><li>物理按键 / 编码器（如EC11）/ 多功能按键（如SLLB120200）</li></ul><h2 id="知识储备">知识储备</h2><ul><li>对应的LVGL文档页面<ul><li>原版英文文档【<a target="_blank" rel="noopener" href="https://docs.lvgl.io/master/porting/indev.html">传送门</a>】</li><li>百问网翻译版文档【<a target="_blank" rel="noopener" href="http://lvgl.100ask.net/8.2/porting/indev.html">传送门</a>】</li></ul></li></ul><hr><h1>流程讲解</h1><p>在摆代码之前，先过一下流程，因为所有的输入设备都是基于这一套流程走的，代码都大同小异<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/10/03/651bdf615cfbb.png" alt="image-20230629123828017"><br>这里面my_indev_read是一个函数名，其作用就是不断读取输入设备的状态，当检测到输入设备的状态与之前的状态不同时就会更新状态并做出相应的响应，响应事件见【<a target="_blank" rel="noopener" href="http://lvgl.100ask.net/master/overview/event.html">传送门</a>】</p><h1>实例</h1><blockquote><p>所有的实例都是基于LVGL官方模板所写的，模板详见【<a target="_blank" rel="noopener" href="https://github.com/lvgl/lvgl/tree/master/examples/porting">传送门</a>】,以下实例的使用方法就是将其建成一个.cpp文件，并新建一个同名.h文件，.h文件用于函数声明且和在其他文件中调用，.c文件用于函数定义(这些都是c语言的基础知识，实在不懂的自行百度吧)，这里的输入设备初识化只需要在你工程初识化的地方调用lv_port_indev_init()函数即可</p></blockquote><h2 id="触摸屏">触摸屏</h2><blockquote><p>触摸屏反馈及初识化函数用的是第三方库【<a target="_blank" rel="noopener" href="https://github.com/Bodmer/TFT_eSPI">TFT_eSPI</a>】中的相关内容</p></blockquote><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;lvgl.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;TFT_eSPI.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 触摸屏状态更新函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_touchpad_read</span><span class="params">( <span class="type">lv_indev_drv_t</span> * indev_driver, <span class="type">lv_indev_data_t</span> * data )</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="type">uint16_t</span> touchX, touchY;</span><br><span class="line"></span><br><span class="line">    <span class="type">bool</span> touched = tft.getTouch( &amp;touchX, &amp;touchY, <span class="number">600</span> );</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>( !touched )</span><br><span class="line">    &#123;</span><br><span class="line">        data-&gt;state = LV_INDEV_STATE_REL;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    &#123;</span><br><span class="line">        data-&gt;state = LV_INDEV_STATE_PR;</span><br><span class="line"></span><br><span class="line">        <span class="comment">/*Set the coordinates*/</span></span><br><span class="line">        data-&gt;point.x = touchX;</span><br><span class="line">        data-&gt;point.y = touchY;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//Serial.print( &quot;Data x &quot; );</span></span><br><span class="line">        <span class="comment">//Serial.println( touchX );</span></span><br><span class="line">        <span class="comment">//Serial.print( &quot;Data y &quot; );</span></span><br><span class="line">        <span class="comment">//Serial.println( touchY );</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 触摸屏初识化函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_touchpad_init</span><span class="params">()</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">// 以下两种方式的功能都是触摸屏的校准，TFT_eSPI用的是第一种，而LVGL官方用的是第二种，我也不知道那种方式更好</span></span><br><span class="line">	 <span class="comment">// Calibrate the touch screen and retrieve the scaling factors</span></span><br><span class="line">	 touch_calibrate();</span><br><span class="line">	</span><br><span class="line">	<span class="comment">/*</span></span><br><span class="line"><span class="comment">	 // Replace above line with the code sent to Serial Monitor</span></span><br><span class="line"><span class="comment">	 // once calibration is complete, e.g.:</span></span><br><span class="line"><span class="comment">	 uint16_t calData[5] = &#123; 286, 3534, 283, 3600, 6 &#125;;</span></span><br><span class="line"><span class="comment">	 tft.setTouch(calData);</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 输入设备初识化函数</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">lv_port_indev_init</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">// 初识化触摸屏</span></span><br><span class="line">	my_touchpad_init();</span><br><span class="line">	<span class="comment">// 注册输入设备</span></span><br><span class="line">	<span class="type">static</span> <span class="type">lv_indev_drv_t</span> indev_drv;</span><br><span class="line">	lv_indev_drv_init( &amp;indev_drv );</span><br><span class="line">	indev_drv.type = LV_INDEV_TYPE_POINTER;</span><br><span class="line">	indev_drv.read_cb = my_touchpad_read;</span><br><span class="line">	lv_indev_drv_register( &amp;indev_drv );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="实体按键">实体按键</h2><blockquote><p>实体按键可以使用第三方库【<a target="_blank" rel="noopener" href="https://github.com/MajicDesigns/MD_UISwitch">MD_UISwitch</a>】作为按键的反馈（支持长按阶段性反馈，即长按的话隔一段时间就切换下一个组件，但这样就不能响应LV_EVENT_LONG_PRESSED中的长按响应事件了），也可以直接使用Arduino中digitalWrite()读取引脚电平或者其他单片机中读取引脚电平的方法（这种方式支持LV_EVENT_LONG_PRESSED中的长按响应事件，但不能长按阶段性反馈），看各位取舍吧，我的建议就是一般导航键都有3个按键，左右及确定键，左右键使用MD_UISwitch，中间确定键使用digitalWrite()</p></blockquote><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;lvgl.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&quot;MD_UISwitch.h&quot;</span></span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinA 1	<span class="comment">// 左键引脚</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinB 2  <span class="comment">// 右键引脚</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinC 3  <span class="comment">// 确定键引脚</span></span></span><br><span class="line"></span><br><span class="line">MD_UISwitch_Digital <span class="title function_">Key_L</span><span class="params">(PinA, (<span class="type">uint8_t</span>)LOW)</span>;</span><br><span class="line">MD_UISwitch_Digital <span class="title function_">Key_R</span><span class="params">(PinB, (<span class="type">uint8_t</span>)LOW)</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按键扫描函数，用于区分哪个按键按下了</span></span><br><span class="line"><span class="type">uint8_t</span> <span class="title function_">Key_Scan</span><span class="params">()</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (digitalRead(PinC) == LOW)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//Serial.Println(&quot;[Navigation] click&quot;);</span></span><br><span class="line">		<span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	MD_UISwitch::keyResult_t k_r = Key_R.read();</span><br><span class="line">	MD_UISwitch::keyResult_t k_l = Key_L.read();</span><br><span class="line"></span><br><span class="line">	<span class="keyword">if</span> (k_l == MD_UISwitch::KEY_PRESS)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//Serial.Println(&quot;[Navigation] prev&quot;);</span></span><br><span class="line">		<span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">else</span> <span class="keyword">if</span> (k_r == MD_UISwitch::KEY_PRESS)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//Serial.Println(&quot;[Navigation] next&quot;);         </span></span><br><span class="line">		<span class="keyword">return</span> <span class="number">3</span>;			</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">return</span> <span class="number">0</span>;<span class="comment">// 没按下返回0</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按键状态更新函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_key_read</span><span class="params">( <span class="type">lv_indev_drv_t</span> * indev_driver, <span class="type">lv_indev_data_t</span> * data )</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="type">static</span> <span class="type">uint32_t</span> last_key = <span class="number">0</span>;</span><br><span class="line">	<span class="type">uint8_t</span> act_enc = Key_Scan();</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">if</span>(act_enc != <span class="number">0</span>) &#123;</span><br><span class="line">	    <span class="keyword">switch</span>(act_enc) &#123;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">	            act_enc = LV_KEY_ENTER;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_PRESSED;	</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">	            act_enc = LV_KEY_RIGHT;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_RELEASED;</span><br><span class="line">	            data-&gt;enc_diff++;</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">	            act_enc = LV_KEY_LEFT;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_RELEASED;</span><br><span class="line">	            data-&gt;enc_diff--;</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	    &#125;</span><br><span class="line">	    last_key = (<span class="type">uint32_t</span>)act_enc;</span><br><span class="line">	&#125;</span><br><span class="line">	data-&gt;key = last_key;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按键初识化函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_key_init</span><span class="params">()</span></span><br><span class="line">&#123;</span><br><span class="line">	Key_L.enableDoublePress(<span class="literal">false</span>);	<span class="comment">// 是否允许双击</span></span><br><span class="line">	Key_L.enableLongPress(<span class="literal">false</span>);	<span class="comment">// 是否允许长按</span></span><br><span class="line">	Key_R.enableDoublePress(<span class="literal">false</span>);	<span class="comment">// 是否允许双击</span></span><br><span class="line">	Key_R.enableLongPress(<span class="literal">false</span>);	<span class="comment">// 是否允许长按</span></span><br><span class="line">	pinMode(PinC, INPUT_PULLUP);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 输入设备初识化函数</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">lv_port_indev_init</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">// 初识化按键</span></span><br><span class="line">	my_key_init();</span><br><span class="line">	<span class="comment">// 注册输入设备</span></span><br><span class="line">	<span class="type">static</span> <span class="type">lv_indev_drv_t</span> indev_drv;</span><br><span class="line">	lv_indev_drv_init( &amp;indev_drv );</span><br><span class="line">	<span class="comment">// 说一下这里的类型为什么要设置为编码器类型，因为我试过很多遍LV_INDEV_TYPE_KEYPAD都没成功，</span></span><br><span class="line">	<span class="comment">// 我觉得是这里的KEYPAD可能指的是键盘鼠标的那种键盘，所以就没成功，当然也可能单纯是我菜</span></span><br><span class="line">	indev_drv.type = LV_INDEV_TYPE_ENCODER;</span><br><span class="line">	indev_drv.read_cb = my_key_read;</span><br><span class="line">	lv_indev_drv_register( &amp;indev_drv );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="多功能按键-或叫波轮按键">多功能按键(或叫波轮按键)</h2><blockquote><p>多功能按键并不属于编码器类型，虽然它们之间有些形状类似，但原理截然不同，多功能按键本质上就是按键<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://s2.loli.net/2023/10/03/fOBuTg9x1InFHdj.png" alt="image-20230629123925089" style="zoom:80%"><br>多功能按键一共有6个引脚，其中C为公共脚，一般接地或接VCC<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://img1.imgtp.com/2023/06/29/GKQFLI7s.png" alt="image-20230629124010790"><br>当多功能按键中间键按下时，C脚和T脚接通，因此C+T脚可以组成一个按键开关<br><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://s2.loli.net/2023/10/03/qpiESJnkwWFtObN.png" alt="image-20230629124030837"><br>如图，图中黑色部分表示接通，如当波轮开关顺时针旋转11°时1，C脚接通，当波轮开关继续旋转到21.5°时1,2，C脚接通，因此1,2都可以分别和C脚组成一个开关，当转动角度不同时，1,2引脚被相继置为低电平或高电平（根据C引脚决定)</p></blockquote><p>知道了多功能按键的原理，使用起来也非常简单，只需要把多功能按键看做按键使用，将1,4，T（或2,3，T）引脚分别接到单片机IO口上，C引脚接地就能组成上述实体按键一样的效果，代码就不展示了，稍微变通一下就行</p><h2 id="编码器">编码器</h2><blockquote><p>编码器的类型有各式各样，但原理都相同（原理我也没怎么明白，就不丢人了）,其都有ABC及S四个引脚（有些有多个S引脚），A，B引脚为左右旋的时候触发，C引脚为按下时触发，因此可以将S引脚接地，AB及C引脚接单片机IO口组成导航键，这里的编码器反馈用到了第三方库【<a target="_blank" rel="noopener" href="https://github.com/MajicDesigns/MD_REncoder">MD_REncoder</a>】，没办法，Arduino好就好在第三方库多，完全不用懂原理就能用（窃喜）</p></blockquote><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;lvgl.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&quot;MD_REncoder.h&quot;</span></span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinA 1	<span class="comment">// 左键引脚</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinB 2  <span class="comment">// 右键引脚</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PinC 3  <span class="comment">// 确定键引脚</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">static</span> MD_REncoder R = MD_REncoder(PinA, PinB);		<span class="comment">//旋转编码器</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 编码器扫描函数，用于判断左右及按下状态</span></span><br><span class="line"><span class="type">uint8_t</span> <span class="title function_">Encoder_Scan</span><span class="params">()</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (digitalRead(PinC) == LOW)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//Serial.Println(&quot;[Navigation] click&quot;);</span></span><br><span class="line">		<span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="type">uint8_t</span> x = R.read();</span><br><span class="line">	<span class="keyword">if</span> (x)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">// x == DIR_CW;</span></span><br><span class="line">		<span class="keyword">if</span> (x == DIR_CW ) &#123;</span><br><span class="line">			<span class="comment">//Serial.println(&quot;[Navigation] next&quot;);         </span></span><br><span class="line">			<span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">else</span></span><br><span class="line">		&#123;</span><br><span class="line">			<span class="comment">//Serial.println(&quot;[Navigation] prev&quot;);</span></span><br><span class="line">			<span class="keyword">return</span> <span class="number">3</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">return</span> <span class="number">0</span>;<span class="comment">// 没按下返回0</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编码器状态更新函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_encoder_read</span><span class="params">( <span class="type">lv_indev_drv_t</span> * indev_driver, <span class="type">lv_indev_data_t</span> * data )</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="type">static</span> <span class="type">uint32_t</span> last_key = <span class="number">0</span>;</span><br><span class="line">	<span class="type">uint8_t</span> act_enc = Encoder_Scan();</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">if</span>(act_enc != <span class="number">0</span>) &#123;</span><br><span class="line">	    <span class="keyword">switch</span>(act_enc) &#123;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">	            act_enc = LV_KEY_ENTER;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_PRESSED;	</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">	            act_enc = LV_KEY_RIGHT;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_RELEASED;</span><br><span class="line">	            data-&gt;enc_diff++;</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	        <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">	            act_enc = LV_KEY_LEFT;</span><br><span class="line">	            data-&gt;state = LV_INDEV_STATE_RELEASED;</span><br><span class="line">	            data-&gt;enc_diff--;</span><br><span class="line">	            <span class="keyword">break</span>;</span><br><span class="line">	    &#125;</span><br><span class="line">	    last_key = (<span class="type">uint32_t</span>)act_enc;</span><br><span class="line">	&#125;</span><br><span class="line">	data-&gt;key = last_key;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按键初识化函数</span></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">my_encoder_init</span><span class="params">()</span></span><br><span class="line">&#123;</span><br><span class="line">	R.begin();</span><br><span class="line">	pinMode(PinC, INPUT_PULLUP);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 输入设备初识化函数</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">lv_port_indev_init</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">// 初识化编码器</span></span><br><span class="line">	my_encoder_init();</span><br><span class="line">	<span class="comment">// 注册输入设备</span></span><br><span class="line">	<span class="type">static</span> <span class="type">lv_indev_drv_t</span> indev_drv;</span><br><span class="line">	lv_indev_drv_init( &amp;indev_drv );</span><br><span class="line">	indev_drv.type = LV_INDEV_TYPE_ENCODER;</span><br><span class="line">	indev_drv.read_cb = my_encoder_read;</span><br><span class="line">	lv_indev_drv_register( &amp;indev_drv );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1>将输入设备与组件绑定</h1><blockquote><p>输入设备初识化成功后如何将其与LVGL中的组件进行绑定呢？这是很多教程中没有说明的，也是我踩了很多坑之后才知道的。这里就需要知道一个lv_group_t的概念，group是LVGL中很重要的一部分，其作用就是将许多LVGL中的组件划分为不同的组，输入设备可以通过切换绑定的组从而控制不同组中的组件，这里介绍几个group中常用的函数，更多函数见【<a href="">传送门</a>】</p></blockquote><ul><li>lv_group_t * lv_group_create(void)<ul><li>作用：创建一个lv_group_t实例，如 lv_group_t* group = lv_group_create()</li></ul></li><li>void lv_group_del(lv_group_t* group)<ul><li>作用：删除一个lv_group_t实例</li></ul></li><li>void lv_group_set_default(lv_group_t * group)<ul><li>作用：设置一个group实例为默认组</li></ul></li><li>lv_group_t * lv_group_get_default(void)<ul><li>作用：获取默认组</li></ul></li><li>void lv_group_add_obj(lv_group_t * group, lv_obj_t * obj)<ul><li>作用：group填加组件，只有在group中添加的组件才能受到控制</li></ul></li><li>void lv_group_remove_obj(struct _lv_obj_t * obj)<ul><li>作用：group移除组件</li></ul></li><li>void lv_group_remove_all_objs(lv_group_t * group)<ul><li>作用：group移除所有组件</li></ul></li><li>void lv_group_set_editing(lv_group_t * group, bool edit)<ul><li>作用：设置group为编辑模式或者导航模式，这里的编辑模式只对如下拉列表，按键矩阵等有二级控件时有用，一般来说这些在导航模式都需要先点击确定才能编辑，而在编辑模式下，无需确定即可编辑</li></ul></li><li>void lv_indev_set_group(lv_indev_t * indev, lv_group_t * group)<ul><li>作用：将输入设备与group相绑定，这里的输入设备指lv_indev_drv_register()返回的值，这个最重要了， 前面初识化，添加组件都弄了，要是最后没绑定，一切都白搭</li></ul></li></ul><p>这里给个例子吧</p><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">lv_obj_t</span>* btn1 = lv_btn_create(<span class="literal">NULL</span>);</span><br><span class="line"><span class="type">lv_obj_t</span>* btn2 = lv_btn_create(<span class="literal">NULL</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// group可以在void lv_port_indev_init()函数中就创建，而在窗口中通过</span></span><br><span class="line"><span class="comment">// lv_group_t* group = lv_group_get_default();</span></span><br><span class="line"><span class="comment">// lv_group_add_obj(group, obj);</span></span><br><span class="line"><span class="comment">// 的方式添加组件,更多的自己慢慢探索吧</span></span><br><span class="line">group = lv_group_create();</span><br><span class="line">lv_group_set_default(group);</span><br><span class="line">lv_group_remove_all_objs(group);</span><br><span class="line">lv_group_add_obj(group, btn1);</span><br><span class="line">lv_group_add_obj(group, btn2);</span><br><span class="line"><span class="comment">// 这里的indev_encoder是lv_indev_drv_register( &amp;indev_drv )的返回值</span></span><br><span class="line"><span class="comment">// 案例中均没有使用到这个值</span></span><br><span class="line">lv_indev_set_group(indev_encoder, group);</span><br></pre></td></tr></table></figure><h1>最后</h1><div class="note info flat"><blockquote><p>LVGL官方最近出了一个图形化工具，根据简单的拖拽即可导出UI代码，支持最新的LVGL8.2版本，不过目前支持的组件不多，而且是付费应用（有30天试用期），感兴趣的见【<a target="_blank" rel="noopener" href="https://squareline.io/">传送门</a>】。<br>我还是建议自己敲代码，尽管这样会踩很多坑，但毕竟踩坑才能进步，才能成长。<br>最后，看反馈不定期更下一期！</p></blockquote></div></article><div class="post-copyright"><div class="copyright-cc-box"><i class="anzhiyufont anzhiyu-icon-copyright"></i></div><div class="post-copyright__author_box"><a class="post-copyright__author_img" href="/" title="头像"><img class="post-copyright__author_img_back" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" title="头像" alt="头像"><img class="post-copyright__author_img_front" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" title="头像" alt="头像"></a><div class="post-copyright__author_name">MGodmonkey</div><div class="post-copyright__author_desc">不在沉默中沉沦</div></div><div class="post-copyright__post__info"><a class="post-copyright__original" title="该文章为原创文章，注意版权协议" href="https://www.mgodmonkey.cn/posts/a56fc1a5.html">原创</a><a class="post-copyright-title"><span onclick='rm.copyPageUrl("https://www.mgodmonkey.cn/posts/a56fc1a5.html")'>《ESP32-Arduino》LVGL之输入设备详解及实例</span></a></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div class="rewardLeftButton"><div class="post-reward" onclick="anzhiyu.addRewardMask()"><div class="reward-button button--animated" title="赞赏作者"><i class="anzhiyufont anzhiyu-icon-hand-heart-fill"></i>打赏作者</div><div class="reward-main"><div class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span><ul class="reward-group"><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" target="_blank"><img class="post-qr-code-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_wechat.png" alt="微信"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" target="_blank"><img class="post-qr-code-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/reward_alipay.png" alt="支付宝"></a><div class="post-qr-code-desc">支付宝</div></li></ul><a class="reward-main-btn" href="/about/#about-reward" target="_blank"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></div></div></div><div id="quit-box" onclick="anzhiyu.removeRewardMask()" style="display:none"></div></div><div class="shareRight"><div class="share-link mobile"><div class="share-qrcode"><div class="share-button" title="使用手机访问这篇文章"><i class="anzhiyufont anzhiyu-icon-qrcode"></i></div><div class="share-main"><div class="share-main-all"><div id="qrcode" title="https://www.mgodmonkey.cn/posts/a56fc1a5.html"></div><div class="reward-dec">使用手机访问这篇文章</div></div></div></div></div><div class="share-link weibo"><a class="share-button" target="_blank" href="https://service.weibo.com/share/share.php?title=《ESP32-Arduino》LVGL之输入设备详解及实例&amp;url=https://www.mgodmonkey.cn/posts/a56fc1a5.html&amp;pic=https://mybog.s3.bitiful.net/imgs/cover/cover_26.webp?_r_=47737799-af30-1d7a-a0d3-62c52046243b" rel="external nofollow noreferrer noopener"><i class="anzhiyufont anzhiyu-icon-weibo"></i></a></div><script>function copyCurrentPageUrl(){var e=window.location.href,t=document.createElement("input");t.setAttribute("value",e),document.body.appendChild(t),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),document.body.removeChild(t)}</script><div class="share-link copyurl"><div class="share-button" id="post-share-url" title="复制链接" onclick="copyCurrentPageUrl()"><i class="anzhiyufont anzhiyu-icon-link"></i></div></div></div></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.mgodmonkey.cn" target="_blank">MGodmonkeyの世界</a>！</span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__box"><div class="post-meta__box__tag-list"><a class="post-meta__box__tags" href="/tags/lvgl/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span> lvgl<span class="tagsPageCount">1</span></a><a class="post-meta__box__tags" href="/tags/ESP32/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span> ESP32<span class="tagsPageCount">1</span></a><a class="post-meta__box__tags" href="/tags/Arduino/"><span class="tags-punctuation"><i class="anzhiyufont anzhiyu-icon-tag"></i></span> Arduino<span class="tagsPageCount">1</span></a></div></div></div><div class="post_share"><div class="social-share" data-image="https://mybog.s3.bitiful.net/imgs/cover/cover_23.webp?_r_=aec10139-1087-2595-464e-c9d9570c297b" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css" media="print" onload='this.media="all"'><script src="https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/c76bd3e9.html"><img class="prev-cover" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_6.webp?_r_=bb94f888-7022-a346-65c9-56afddd7e4e9" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">部署项目指引</div></div></a></div><div class="next-post pull-right"><a href="/posts/bcf5ea53.html"><img class="next-cover" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_8.webp?_r_=ae09946a-6304-747c-46c2-5092fc6078f5" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">PyQt5技术分享_实现加载界面GIF的呈现</div></div></a></div></nav><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="anzhiyufont anzhiyu-icon-comments"></i> <span>评论</span></div><div class="comment-randomInfo"><a onclick="anzhiyu.addRandomCommentInfo()" href="javascript:void(0)">匿名评论</a><a href="/privacy" style="margin-left:4px">隐私政策</a></div><div class="comment-tips" id="comment-tips"><span>✅ 你无需删除空行，直接评论以获取最佳展示效果</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div><div class="comment-barrage"></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-content"><div class="author-info__sayhi" id="author-info__sayhi" onclick="anzhiyu.changeSayHelloText()"></div><div class="author-info-avatar"><img class="avatar-img" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/head.jpg" onerror='this.onerror=null,this.src="/img/404.webp"' alt="avatar"><div class="author-status"><img class="g-status" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/08/24/64e6ce9c507bb.png" alt="status"></div></div><div class="author-info__description"><div style="line-height:1.38;margin:.1rem 0;text-align:justify;color:rgba(255,255,255,.8)">这里是我的<b style="color:#fff">科研日记本</b>和<b style="color:#fff">学习记录本</b>，目前处于研1阶段，主攻领域为<b style="color:#fff">空中机器人</b>，因此你将会在这看到大量关于<b style="color:#fff">ROS</b>、<b style="color:#fff">无人机</b>、<b style="color:#fff">算法</b>等教程</div><div style="line-height:1.38;margin:.3rem 0;text-align:justify;color:rgba(255,255,255,.8)">希望你能在这里学习到有用的<b style="color:#fff">知识</b>，可以的话可以<b style="color:#fff">收藏本网站😘</b>。</div></div><div class="author-info__bottom-group"><a class="author-info__bottom-group-left" href="/"><h1 class="author-info__name">MGodmonkey</h1><div class="author-info__desc">不在沉默中沉沦</div></a><div class="card-info-social-icons is-center"><a class="social-icon faa-parent animated-hover" href="https://github.com/MGod-monkey" target="_blank" title="Github"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-github"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://gitee.com/mgod_wu" target="_blank" title="Gitee"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-gitee"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://blog.csdn.net/qq_45516773" target="_blank" title="CSDN"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-csdn"></use></svg></a></div></div></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bullhorn anzhiyu-shake"></i><span>公告</span></div><div class="announcement_content"><center>主域名：<br><del><a target="_blank" rel="noopener" href="https://www.mgodmonkey.love"><b><font color="#5ea6e5">mgodmonkey.love(太贵续费不起)</font></b></a></del><br><a href="https://www.mgodmonkey.cn"><b><font color="#5ee5e0">mgodmonkey.cn</font></b></a><br>备用域名：<br><a target="_blank" rel="noopener" href="https://mgod-monkey.github.io/"><b><font color="#5ea6e5">mgodmonkey.github.io</font></b></a><br><a target="_blank" rel="noopener" href="https://mgodmonkey.zeabur.app/"><b><font color="#5ea6e5">mgodmonkey.zeabur.app</font></b></a><br><a href="mailto:mgod_monkey@qq.com">📬：<font color="#a591e0">mgod_monkey@qq.com</font></a></center></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bars"></i><span>文章目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">前期准备</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83"><span class="toc-text">环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A1%AC%E4%BB%B6"><span class="toc-text">硬件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%87"><span class="toc-text">知识储备</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">流程讲解</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">实例</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A6%E6%91%B8%E5%B1%8F"><span class="toc-text">触摸屏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E4%BD%93%E6%8C%89%E9%94%AE"><span class="toc-text">实体按键</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E5%8A%9F%E8%83%BD%E6%8C%89%E9%94%AE-%E6%88%96%E5%8F%AB%E6%B3%A2%E8%BD%AE%E6%8C%89%E9%94%AE"><span class="toc-text">多功能按键(或叫波轮按键)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E7%A0%81%E5%99%A8"><span class="toc-text">编码器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">将输入设备与组件绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text">最后</span></a></li></ol></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="footer_deal"><a class="deal_link" href="mailto:mgod_monkey@qq.com" title="email"><i class="anzhiyufont anzhiyufont anzhiyu-icon-envelope"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://www.facebook.com/profile.php?id=100093287072649&amp;sk=about" title="facebook"><i class="anzhiyufont anzhiyufont anzhiyu-icon-facebook1"></i></a><img class="footer_mini_logo" title="返回顶部" alt="返回顶部" onclick="anzhiyu.scrollToDest(0,500)" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/xx.webp" size="50px"><a class="deal_link" target="_blank" rel="noopener" href="https://github.com/MGod-monkey" title="Github"><i class="anzhiyufont anzhiyufont anzhiyu-icon-github"></i></a><a class="deal_link" target="_blank" rel="noopener" href="https://v.douyin.com/UaF6wSA/" title="抖音"><i class="anzhiyufont anzhiyufont anzhiyu-icon-tiktok"></i></a></div><div id="anzhiyu-footer"><div class="footer-group"><div class="footer-title">服务</div><div class="footer-links"><a class="footer-item" title="51la统计" target="_blank" rel="noopener" href="https://v6.51.la/">51la统计</a><a class="footer-item" title="十年之约" target="_blank" rel="noopener" href="https://www.foreverblog.cn/">十年之约</a><a class="footer-item" title="开往" target="_blank" rel="noopener" href="https://github.com/travellings-link/travellings">开往</a></div></div><div class="footer-group"><div class="footer-title">导航</div><div class="footer-links"><a class="footer-item" title="即刻短文" href="/personal/essay/">即刻短文</a><a class="footer-item" title="友链文章" href="/fcircle/">友链文章</a><a class="footer-item" title="留言板" href="/comments/">留言板</a></div></div><div class="footer-group"><div class="footer-title">协议</div><div class="footer-links"><a class="footer-item" title="隐私协议" href="/privacy/">隐私协议</a><a class="footer-item" title="Cookies" href="/cookies/">Cookies</a><a class="footer-item" title="版权协议" href="/copyright/">版权协议</a></div></div><div class="footer-group"><div class="footer-title-group"><div class="footer-title">友链</div><a class="random-friends-btn" id="footer-random-friends-btn" href="javascript:addFriendLinksInFooter();" title="换一批友情链接"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a></div><div class="footer-links" id="friend-links-in-footer"></div></div></div><div id="workboard"><div id="runtimeTextTip"></div></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架Hexo_v6.4.3" title="博客框架Hexo_v6.4.3"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://sourcebucket.s3.bitiful.net/badge/Frame-Hexo-blue.svg" alt="博客框架Hexo_v6.4.3"></a><a class="github-badge" target="_blank" href="https://docs.anheyu.com/" style="margin-inline:5px" data-title="主题版本Anzhiyu_v1.5.0" title="主题版本Anzhiyu_v1.5.0"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.9/img/Theme-AnZhiYu-2E67D3.svg" alt="主题版本Anzhiyu_v1.5.0"></a><a class="github-badge" target="_blank" href="https://vercel.com/" style="margin-inline:5px" data-title="本站采用多线部署，主线路托管于Vercel" title="本站采用多线部署，主线路托管于Vercel"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://sourcebucket.s3.bitiful.net/badge/Hosted-Vercel-brightgreen.svg" alt="本站采用多线部署，主线路托管于Vercel"></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" data-title="本站项目由Github托管" title="本站项目由Github托管"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg" alt="本站项目由Github托管"></a><a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/" style="margin-inline:5px" data-title="本站已完成备案，桂ICP备-2023001814号" title="本站已完成备案，桂ICP备-2023001814号"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/桂ICP备-2023001814号-1.svg" alt="本站已完成备案，桂ICP备-2023001814号"></a><a class="github-badge" target="_blank" href="https://icp.gov.moe/?keyword=20248520" style="margin-inline:5px" data-title="本站已加入萌ICP豪华套餐，萌ICP备20248520号" title="本站已加入萌ICP豪华套餐，萌ICP备20248520号"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/mengICP_20248520.svg" alt="本站已加入萌ICP豪华套餐，萌ICP备20248520号"></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/Copyright-BY-NC-SA.svg" alt="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div id="footer-bar-tips"><div class="copyright">&copy;2023 - 2024 By <a class="footer-bar-link" href="/" title="MGodmonkey" target="_blank">MGodmonkey</a></div></div><div id="footer-type-tips"></div><div class="js-pjax"><script>function subtitleType(){fetch("https://v1.hitokoto.cn").then((t=>t.json())).then((t=>{{const e="出自 "+t.from,p=[];p.unshift(t.hitokoto,e),window.typed=new Typed("#footer-type-tips",{strings:p,startDelay:300,typeSpeed:150,loop:!0,backSpeed:50})}}))}"function"==typeof Typed?subtitleType():getScript("https://cdn.cbd.int/typed.js@2.1.0/dist/typed.umd.js").then(subtitleType)</script></div></div><div class="footer-bar-right"><a class="footer-bar-link" target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="桂ICP备-2023001814号">桂ICP备-2023001814号</a><a class="footer-bar-link cc" href="/copyright" title="cc协议"><i class="anzhiyufont anzhiyu-icon-copyright-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-by-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nc-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nd-line"></i></a></div></div></div></footer></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="sidebar-site-data site-data is-center"><a href="/archives/" title="archive"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/" title="tag"><div class="headline">标签</div><div class="length-num">18</div></a><a href="/categories/" title="category"><div class="headline">分类</div><div class="length-num">13</div></a></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><a class="darkmode_switchbutton menu-child" href="javascript:void(0);" title="显示模式"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span>显示模式</span></a></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" href="https://www.mgodmonkey.cn/" title="博客"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">AI项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://chat.mgodmonkey.cn/" title="ChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="ChatGPT"><span class="back-menu-item-text">ChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://newchat.mgodmonkey.cn/" title="NewChatGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="NewChatGPT"><span class="back-menu-item-text">NewChatGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://autogpt.mgodmonkey.cn/" title="AutoGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/火龙果.svg" alt="AutoGPT"><span class="back-menu-item-text">AutoGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://academic.chatwithpaper.org/" title="AcademicGPT"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/石榴.svg" alt="AcademicGPT"><span class="back-menu-item-text">AcademicGPT</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://chatwithpaper.org/" title="Chatpaper"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/芒果.svg" alt="Chatpaper"><span class="back-menu-item-text">Chatpaper</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">其他</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener" href="https://memos.mgodmonkey.cn/" title="Memos"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/圣女果.svg" alt="Memos"><span class="back-menu-item-text">Memos</span></a><a class="back-menu-item" target="_blank" rel="noopener" href="https://github.com/MGod-monkey/Must_Pass_Experiment_of_TY" title="必过通原"><img class="back-menu-item-icon" src="" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/苹果.svg" alt="必过通原"><span class="back-menu-item-text">必过通原</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>文章</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kele"></use></svg> <span>归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-zhaji"></use></svg> <span>标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-denglong"></use></svg> <span>分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>休闲</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://music.mgodmonkey.cn"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-erji"></use></svg> <span>音乐</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu-kafei"></use></svg> <span>番剧</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/air-conditioner"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-chonglang"></use></svg> <span>空调</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>社交</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon--chat"></use></svg> <span>留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-zhaopian_1"></use></svg> <span>相册集</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/MyFavoriteBaby/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xingsu"></use></svg> <span>大陆养虾</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_shu"></use></svg> <span>加入友链</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span>个人</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/essay/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_qizhi"></use></svg> <span>说说</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/task_list/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xiaoya"></use></svg> <span>清单</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/equipment/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_xigua"></use></svg> <span>装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-xiangsu_aixin"></use></svg> <span>关于</span></a></li></ul></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/Arduino/" style="font-size:.88rem;color:#c1b22b">Arduino<sup>1</sup></a><a href="/tags/ESP32/" style="font-size:.88rem;color:#92b15c">ESP32<sup>1</sup></a><a href="/tags/Markdown/" style="font-size:.88rem;color:#a8369c">Markdown<sup>1</sup></a><a href="/tags/SLAM/" style="font-size:.88rem;color:#8d6e37">SLAM<sup>1</sup></a><a href="/tags/linux/" style="font-size:.88rem;color:#6a4fc3">linux<sup>1</sup></a><a href="/tags/lvgl/" style="font-size:.88rem;color:#027428">lvgl<sup>1</sup></a><a href="/tags/pyqt5/" style="font-size:.88rem;color:#c42e7e">pyqt5<sup>5</sup></a><a href="/tags/ros/" style="font-size:.88rem;color:#766266">ros<sup>21</sup></a><a href="/tags/wsl/" style="font-size:.88rem;color:#4e522c">wsl<sup>1</sup></a><a href="/tags/yolo/" style="font-size:.88rem;color:#6c1688">yolo<sup>1</sup></a><a href="/tags/%E4%BA%8B%E4%BB%B6%E7%9B%B8%E6%9C%BA/" style="font-size:.88rem;color:#100984">事件相机<sup>1</sup></a><a href="/tags/%E4%BB%BF%E7%9C%9F/" style="font-size:.88rem;color:#5d128b">仿真<sup>1</sup></a><a href="/tags/%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE/" style="font-size:.88rem;color:#01584a">外挂标签<sup>1</sup></a><a href="/tags/%E6%97%A0%E4%BA%BA%E6%9C%BA/" style="font-size:.88rem;color:#4dac89">无人机<sup>9</sup></a><a href="/tags/%E6%B5%8B%E8%AF%84/" style="font-size:.88rem;color:#861e41">测评<sup>1</sup></a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size:.88rem;color:#a39674">算法<sup>3</sup></a><a href="/tags/%E9%97%AE%E9%A2%98%E5%A4%A7%E5%85%A8/" style="font-size:.88rem;color:#3d7831">问题大全<sup>1</sup></a><a href="/tags/%E9%A1%B9%E7%9B%AE%E5%88%86%E4%BA%AB/" style="font-size:.88rem;color:#0a35ad">项目分享<sup>1</sup></a></div></div><hr></div></div><div id="keyboard-tips"><div class="keyboardTitle">博客快捷键</div><div class="keybordList"><div class="keybordItem"><div class="keyGroup"><div class="key">shift K</div></div><div class="keyContent"><div class="content">关闭快捷键功能</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift A</div></div><div class="keyContent"><div class="content">打开/关闭中控台</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift M</div></div><div class="keyContent"><div class="content">播放/暂停音乐</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift D</div></div><div class="keyContent"><div class="content">深色/浅色显示模式</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift S</div></div><div class="keyContent"><div class="content">站内搜索</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift R</div></div><div class="keyContent"><div class="content">随机访问</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift H</div></div><div class="keyContent"><div class="content">返回首页</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift F</div></div><div class="keyContent"><div class="content">友链鱼塘</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift L</div></div><div class="keyContent"><div class="content">友链页面</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift P</div></div><div class="keyContent"><div class="content">关于本站</div></div></div><div class="keybordItem"><div class="keyGroup"><div class="key">shift I</div></div><div class="keyContent"><div class="content">原版/本站右键菜单</div></div></div></div></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="anzhiyufont anzhiyu-icon-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="anzhiyufont anzhiyu-icon-gear"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="anzhiyufont anzhiyu-icon-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="anzhiyufont anzhiyu-icon-comments"></i></a><a id="switch-commentBarrage" href="javascript:anzhiyu.switchCommentBarrage();" title="开关弹幕"><i class="anzhiyufont anzhiyu-icon-danmu"></i></a><button id="go-up" type="button" title="回到顶部"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><div id="nav-music"><a id="nav-music-hoverTips" onclick="anzhiyu.musicToggle()" accesskey="m">播放音乐</a><div id="console-music-bg"></div><meting-js id="572504216" server="netease" type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random" volume="0.7"></meting-js></div><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="anzhiyufont anzhiyu-icon-xmark"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="anzhiyufont anzhiyu-icon-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="anzhiyufont anzhiyu-icon-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right" style="font-size:1rem"></i></div><div class="rightMenu-item" id="menu-top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="anzhiyufont anzhiyu-icon-paste"></i><span>粘贴文本</span></div><a class="rightMenu-item" id="menu-commenttext"><i class="anzhiyufont anzhiyu-icon-comment-medical"></i><span>引用到评论</span></a><div class="rightMenu-item" id="menu-newwindow"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="anzhiyufont anzhiyu-icon-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="anzhiyufont anzhiyu-icon-images"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="anzhiyufont anzhiyu-icon-download"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-newwindowimg"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开图片</span></div><div class="rightMenu-item" id="menu-search"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>站内搜索</span></div><div class="rightMenu-item" id="menu-searchBaidu"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>百度搜索</span></div><div class="rightMenu-item" id="menu-music-toggle"><i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span></div><div class="rightMenu-item" id="menu-music-back"><i class="anzhiyufont anzhiyu-icon-backward"></i><span>切换到上一首</span></div><div class="rightMenu-item" id="menu-music-forward"><i class="anzhiyufont anzhiyu-icon-forward"></i><span>切换到下一首</span></div><div class="rightMenu-item" id="menu-music-playlist" onclick="window.open(&quot;https://music.mgodmonkey.cn&quot;, &quot;_blank&quot;);" style="display:none"><i class="anzhiyufont anzhiyu-icon-radio"></i><span>查看所有歌曲</span></div><div class="rightMenu-item" id="menu-music-copyMusicName"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制歌名</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" id="menu-randomPost"><i class="anzhiyufont anzhiyu-icon-shuffle"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="anzhiyufont anzhiyu-icon-cube"></i><span>博客分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item" id="menu-copy" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制地址</span></a><a class="rightMenu-item" id="menu-commentBarrage" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-message"></i><span class="menu-commentBarrage-text">关闭热评</span></a><a class="rightMenu-item" id="menu-darkmode" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></a><a class="rightMenu-item" id="menu-translate" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-language"></i><span>轉為繁體</span></a></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.cbd.int/@fancyapps/ui@5.0.28/dist/fancybox/fancybox.umd.js"></script><script src="https://cdn.cbd.int/instant.page@5.2.0/instantpage.js" type="module"></script><script src="https://cdn.cbd.int/vanilla-lazyload@17.8.5/dist/lazyload.iife.min.js"></script><script src="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script>function panguFn(){"object"==typeof pangu?pangu.autoSpacingPage():getScript("https://cdn.cbd.int/pangu@4.0.7/dist/browser/pangu.min.js").then((()=>{pangu.autoSpacingPage()}))}function panguInit(){GLOBAL_CONFIG_SITE.isPost&&panguFn()}document.addEventListener("DOMContentLoaded",panguInit)</script><script>var meting_api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r"</script><canvas id="universe"></canvas><script async src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/dark/dark.js"></script><script>var HoldLog=console.log;console.log=function(){};let now1=new Date;queueMicrotask((()=>{const o=function(){HoldLog.apply(console,arguments)},n=new Date("03/18/2023 00:00:00");now1.setTime(now1.getTime()+250);const c=(now1-n)/1e3/60/60/24,e=["欢迎来访MGodmonkeyの世界!","心中有光万物皆是光，万物皆是迪迦！","\n        \n    ███╗   ███╗ ██████╗  ██████╗ ██████╗ ███╗   ███╗ ██████╗ ███╗   ██╗██╗  ██╗███████╗██╗   ██╗\n    ████╗ ████║██╔════╝ ██╔═══██╗██╔══██╗████╗ ████║██╔═══██╗████╗  ██║██║ ██╔╝██╔════╝╚██╗ ██╔╝\n    ██╔████╔██║██║  ███╗██║   ██║██║  ██║██╔████╔██║██║   ██║██╔██╗ ██║█████╔╝ █████╗   ╚████╔╝ \n    ██║╚██╔╝██║██║   ██║██║   ██║██║  ██║██║╚██╔╝██║██║   ██║██║╚██╗██║██╔═██╗ ██╔══╝    ╚██╔╝  \n    ██║ ╚═╝ ██║╚██████╔╝╚██████╔╝██████╔╝██║ ╚═╝ ██║╚██████╔╝██║ ╚████║██║  ██╗███████╗   ██║   \n    ╚═╝     ╚═╝ ╚═════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝   ╚═╝    \n        \n        ","已上线",Math.floor(c),"天","©2023 By MGodmonkey 1.6.12"],t=["NCC2-036","调用前置摄像头拍照成功，识别为【小笨蛋】.","Photo captured: ","🤪"];setTimeout(o.bind(console,`\n%c${e[0]} %c ${e[1]} %c ${e[2]} %c${e[3]}%c ${e[4]}%c ${e[5]}\n\n%c ${e[6]}\n`,"color:#3b70fc","","color:#3b70fc","color:#3b70fc","","color:#3b70fc","")),setTimeout(o.bind(console,`%c ${t[0]} %c ${t[1]} %c \n${t[2]} %c\n${t[3]}\n`,"color:white; background-color:#4fd953","","",'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%')),setTimeout(o.bind(console,"%c WELCOME %c 你好，小笨蛋.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c ⚡ Powered by MGodmonkey %c 你正在访问 MGodmonkey 的博客.","color:white; background-color:#f0ad4e","")),setTimeout(o.bind(console,"%c W23-12 %c 你已打开控制台.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c S013-782 %c 你现在正处于监控中.","color:white; background-color:#d9534f",""))}))</script><script async src="/anzhiyu/random.js"></script><script async>!function(){var t,e,n,r,a,o,i,l,h=new Date("03/18/2023 00:00:00"),u=new Date("02/13/2024 11:47:00"),g=new Date;setInterval((()=>{!function(){g=new Date,g.getHours();var f=(g-h)/1e3/60/60/24;t=Math.floor(f);var s=(g-h)/1e3/60/60-24*t;e=Math.floor(s),1==String(e).length&&(e="0"+e);var c=(g-h)/1e3/60-1440*t-60*e;n=Math.floor(c),1==String(n).length&&(n="0"+n);var d=(g-h)/1e3-86400*t-3600*e-60*n;r=Math.round(d),1==String(r).length&&(r="0"+r),g.getHours();var m=(g-u)/1e3/60/60/24;a=Math.floor(m);var v=(g-u)/1e3/60/60-24*a;o=Math.floor(v),1==String(o).length&&(o="0"+o);var y=(g-u)/1e3/60-1440*a-60*o;i=Math.floor(y),1==String(i).length&&(i="0"+i);var M=(g-u)/1e3-86400*a-3600*o-60*i;l=Math.round(M),1==String(l).length&&(l="0"+l)}(),function(){if(!document.getElementById("footer"))return;let h="";h=`恋爱进度条运行了 ${a} 天<span id='runtime'> ${o} 小时 ${i} 分 ${l} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:pink'></i><br>本站居然运行了 ${t} 天<span id='runtime'> ${e} 小时 ${n} 分 ${r} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:blue'></i>`,document.getElementById("runtimeTextTip")&&(document.getElementById("runtimeTextTip").innerHTML=h)}()}),1e3)}()</script><script src="https://cdn.cbd.int/algoliasearch@4.18.0/dist/algoliasearch-lite.umd.js"></script><script src="https://cdn.cbd.int/instantsearch.js@4.60.0/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script><div class="js-pjax"><script>(()=>{const o=()=>{"object"==typeof twikoo?setTimeout(t,0):getScript("https://cdn.cbd.int/twikoo@1.6.30/dist/twikoo.all.min.js").then(t)},t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://twikoo.mgodmonkey.cn/",region:"",onCommentLoaded:()=>{anzhiyu.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))};anzhiyu.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><input type="hidden" name="page-type" id="page-type" value="post"><script async src="/js/anzhiyu/comment_barrage.js"></script></div><script>window.addEventListener("load",(()=>{const e=e=>{let t="";if(e.length)for(let n=0;n<e.length;n++){t+="<div class='aside-list-item'>";{const a="data-lazy-src";t+=`<a href='${e[n].url}' class='thumbnail'><img ${a}='${e[n].avatar}' alt='${e[n].nick}'><div class='name'><span>${e[n].nick} </span></div></a>`}t+=`<div class='content'>\n        <a class='comment' href='${e[n].url}' title='${e[n].content}'>${e[n].content}</a>\n        <time datetime="${e[n].date}">${anzhiyu.diffDate(e[n].date,!0)}</time></div>\n        </div>`}else t+="没有评论";let n=document.querySelector("#card-newest-comments .aside-list");n&&(n.innerHTML=t),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(n)},t=()=>{if(document.querySelector("#card-newest-comments .aside-list")){const t=saveToLocal.get("twikoo-newest-comments");t?e(JSON.parse(t)):(()=>{const t=()=>{twikoo.getRecentComments({envId:"https://twikoo.mgodmonkey.cn/",region:"",pageSize:6,includeReply:!0}).then((function(t){const n=t.map((e=>{return{content:(t=e.comment,""===t||(t=(t=(t=(t=t.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length>150&&(t=t.substring(0,150)+"..."),t),avatar:e.avatar,nick:e.nick,url:e.url+"#"+e.id,date:new Date(e.created).toISOString()};var t}));saveToLocal.set("twikoo-newest-comments",JSON.stringify(n),10/1440),e(n)})).catch((function(e){document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}))};"object"==typeof twikoo?t():getScript("https://cdn.cbd.int/twikoo@1.6.30/dist/twikoo.all.min.js").then(t)})()}};t(),document.addEventListener("pjax:complete",t)}))</script><script async data-pjax src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.1/bubble/bubble.js"></script><script>var visitorMail="who@qq.com"</script><script async data-pjax src="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/waterfall/waterfall.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script><script src="/js/anzhiyu/right_click_menu.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.9/icon/ali_iconfont_css.css"><script async src="https://at.alicdn.com/t/c/font_3960079_reowwynqtt7.js"></script><script async data-pjax src="/js/owo.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/aplayer/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/anzhiyu-blog-static@1.0.1/js/APlayer.min.js"></script><script src="https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.2/assets/js/Meting2.min.js"></script><script src="https://lib.baomitu.com/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors=['meta[property="og:image"]','meta[property="og:title"]','meta[property="og:url"]','meta[property="og:type"]','meta[property="og:site_name"]','meta[property="og:description"]',"head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(anzhiyu.removeGlobalFnEvent("pjax"),anzhiyu.removeGlobalFnEvent("themeChange"),document.getElementById("rightside").classList.remove("rightside-show"),window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode")})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script charset="UTF-8" src="https://cdn.cbd.int/anzhiyu-theme-static@1.1.5/accesskey/accesskey.js"></script></div><div id="popup-window"><div class="popup-window-title">通知</div><div class="popup-window-divider"></div><div class="popup-window-content"><div class="popup-tip">你好呀</div><div class="popup-link"><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i></div></div></div><script data-pjax>function butterfly_swiper_injector_config(){var t=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),t.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_24.webp?_r_=29c82da3-de4f-1818-c6d4-8e86dc8f65bb" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-18</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt="">Markdown语法与外挂标签写法汇总</a><div class="blog-slider__text">🥧本文汇总Markdown格式以及外挂标签在网页端的渲染效果，可作为文档进行查询</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/2013454d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_31.webp?_r_=c21fe602-3554-f265-0e73-1524950a0e28" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt="">物体路径规划项目笔记</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/934e71d1.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/10/02/651ad2e1606f4.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-23</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt="">ROS资源汇总</a><div class="blog-slider__text">ROS常用资源汇总（从入门到入坟）</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/232d6cf1.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://mybog.s3.bitiful.net/imgs/cover/cover_11.webp?_r_=c22c6364-0c20-490e-844b-7addff113b3b" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-29</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt="">ROS指令大全</a><div class="blog-slider__text">ROS常用指令大全（从入门到入坟）</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/f1cb77fb.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>')}for(var elist="undefined".split(","),cpage=location.pathname,epage="/",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script></body></html>